<template>
  <!--查询列-->
  <a-card class="general-card" style="padding-top: 10px;">
    <a-row v-if="config.length > 0" style="padding-top: 20px;">
      <a-col :flex="1">
        <a-form
          ref="queryFormRef"
          label-align="left"
          :model="queryModel"
          :label-col-props="{ span: 6 }"
          :wrapper-col-props="{ span: 18 }"
        >
          <a-row :gutter="16">
            <template v-for="item in config" :key="item.name">
              <a-col :span="8">
                <a-form-item :field="item.name" :label="item.label">
                  <!--todo 其他组件-->
                  <a-input
                    v-if="item.type === 'input'"
                    v-model="queryModel[item.name]"
                    allow-clear
                    :placeholder="item.placeholder"
                  />
                </a-form-item>
              </a-col>
            </template>
          </a-row>
        </a-form>
      </a-col>
      <a-col :flex="'86px'" style="text-align: right">
        <a-space :size="10">
          <a-button type="primary" @click="search">
            <template #icon>
              <icon-search />
            </template>
            {{ $t('table.query.search') }}
          </a-button>
          <a-button @click="reset">
            <template #icon>
              <icon-refresh />
            </template>
            {{ $t('table.query.reset') }}
          </a-button>
        </a-space>
      </a-col>
    </a-row>
  </a-card>
</template>

<script lang="ts" setup>
import { ref, defineEmits, defineProps } from 'vue';

defineProps({
  config: {
    type: Array,
    default: () => {
      return [];
    }
  }
});

const emits = defineEmits(['search', 'reset']);

const queryFormRef = ref();

const queryModel = ref({});

const search = () => {
  emits('search', queryModel.value);
};

const reset = () => {
  queryFormRef.value.resetFields();
  emits('reset');
};

</script>

<style scoped lang="less">
</style>
